<template>
  <view class="homeLayout" :style="{ paddingTop: safeAreaInsets?.top + 'px' }" v-if="window">
    <!-- 自定义头部导航 -->
    <navbar></navbar>
    <scroll-view scroll-y>
      <!-- lunbo图 -->
      <view class="banner">
        <swiper
          indicator-dots
          autoplay
          circular
          indicator-color="rgba(255, 255, 255, 0.3)"
          indicator-active-color="#fff"
        >
          <swiper-item v-for="item in bannerpic" :key="item._id">
            <image :src="item.imageUrl" mode="scaleToFill" />
          </swiper-item>
        </swiper>
      </view>
      <!-- 公告 -->
      <view class="notice">
        <view class="left">
          <uni-icons type="sound-filled" color="orange" size="24" />
          <text>公告</text>
        </view>
        <view class="middle">
          <swiper autoplay circular vertical>
            <swiper-item>日程记录就选日程小站</swiper-item>
            <swiper-item>精美壁纸任意选</swiper-item>
            <swiper-item>多端记录日常作息</swiper-item>
          </swiper>
        </view>
        <view class="right">
          <uni-icons type="right" size="24" color="orange"></uni-icons>
        </view>
      </view>
      <!-- 推荐壁纸 -->
      <view class="recommend">
        <custom>
          <template #left>推荐壁纸</template>
          <template #right>
            <view class="box">
              <uni-icons type="calendar" size="22" color="orange"></uni-icons>
              <uni-dateformat :date="Date.now()" format="dd日" />
            </view>
          </template>
        </custom>
        <view class="content">
          <scroll-view scroll-x>
            <view
              @click="goPreview(recommendList)"
              class="pic"
              v-for="item in recommendList"
              :key="item._id"
            >
              <image :src="item.imageUrl" mode="scaleToFill" />
            </view>
          </scroll-view>
        </view>
      </view>
      <!-- 专题精选 -->
      <view class="theme">
        <custom>
          <template #left>专题分类</template>
          <template #right>
            <!--  <view class="box">
            <navigator url="/pages/"> More + </navigator>
          </view> -->
          </template>
        </custom>
        <view class="list" v-if="isShow">
          <theme v-for="item in themeList" :key="item._id" :theme-data="item"></theme>
        </view>
      </view>
    </scroll-view>
  </view>
  <!-- 骨架屏 -->
  <skeleton v-else />
</template>

<script lang="ts" setup>
import theme from './components/theme.vue'
import { getBannerApi, getRecommendApi, getClassifyApi } from '@/services'
import custom from './components/custom.vue'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import type { bannerData } from '@/types/bannerPic'
import navbar from '@/components/nav.vue'
import skeleton from './components/skeleton.vue'
//骨架屏显示与隐藏
const window = ref<boolean>(false)
// 响应式数据
const isShow = ref<boolean>(false)
//存储分类专题
const themeList = ref<bannerData[]>([])
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
//存储推荐列表
const recommendList = ref<bannerData[]>([])
//获取推荐列表
const getRecommend = async () => {
  //
  const result = await getRecommendApi()
  /*   console.log(result) */
  recommendList.value = result.data
  //
}
//存储轮播图
const bannerpic = ref<bannerData[]>([])
const getBanner = async () => {
  //
  const result = await getBannerApi()
  /* console.log(result.data) */
  bannerpic.value = result.data
  //
}
//跳转到预览页面
const goPreview = (data: bannerData[]) => {
  const itemStr = encodeURIComponent(JSON.stringify(data))
  uni.navigateTo({
    url: `/pages/preview/preview?data=${itemStr}`,
  })
}
//获取分类专题
const getTheme = async () => {
  const result = await getClassifyApi()
  console.log(result)
  themeList.value = result.data
}
onLoad(() => {
  Promise.all([getRecommend(), getBanner(), getTheme()])
  setTimeout(() => {
    window.value = true
  }, 1000)
  isShow.value = true
})
</script>

<style scoped lang="scss">
.homeLayout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  .banner {
    width: 750rpx;
    padding: 30rpx 0;
    swiper {
      width: 750rpx;
      height: 340rpx;
      &-item {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 0 30rpx;
        image {
          height: 100%;
          width: 100%;
          border-radius: 10rpx;
        }
      }
    }
  }
  .notice {
    display: flex;
    width: 690rpx;
    height: 80rpx;
    background-color: #f9f9f9;
    line-height: 80rpx;
    margin: 0 auto;
    border-radius: 80rpx;
    .left {
      width: 140rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      text {
        margin-left: 4rpx;
        color: orange;
        font-weight: bold;
      }
    }
    .right {
      width: 70rpx;
    }
    .middle {
      flex: 1;
      swiper {
        height: 100%;
        &-item {
          height: 100%;
          font-size: 30rpx;
          color: #666;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .recommend {
    padding-top: 50rpx;
    .content {
      width: 720rpx;
      margin-left: 30rpx;
      margin-top: 30rpx;
      scroll-view {
        white-space: nowrap;
        .pic {
          width: 200rpx;
          height: 430rpx;
          display: inline-block;
          margin-right: 15rpx;
          image {
            width: 100%;
            height: 100%;
            border-radius: 10rpx;
          }
        }
        .pic:last-child {
          margin-right: 30rpx;
        }
      }
    }
  }
  .theme {
    padding-top: 50rpx;
    .list {
      display: grid;
      gap: 15rpx;
      grid-template-columns: repeat(3, 1fr);
      margin-top: 30rpx;
      padding: 0 30rpx;
    }
  }
}
</style>
